<template>
  <div class="header-wrapper">
    <div class="ui grid">
      <div class="row">
        <div class="three wide column">
          <div class="ui icon header" @click.stop.prevent=''>
            <i class="icon-manyouzhuiconfont icon"></i>
          </div>
        </div>
        <div class="ten wide column">
          <div v-if="menus" class="ui secondary pointing menu">
            <div v-for="menu in menus" class="item" :class="{active:menu.id==top_mid}" @click="changeTopMenu(menu.id)">
              <a v-if="menu.title=='统计后台'"
                 target="_blank" :href="tjhref">
                {{menu.title}}
              </a>
              <router-link v-else-if="menu.route"
                           :to="{path:menu.route,query:{ctl:menu.ctl,top_mid:menu.id}}">
                {{menu.title}}
              </router-link>

              <router-link v-else
                           :to="{path:'/page/list',query:{ctl:menu.ctl,top_mid:menu.id}}">
                {{menu.title}}
              </router-link>

            </div>
          </div>
          <loading :loadingShow="!menus" type="2" :styleObj="styleObj"></loading>
        </div>
        <div class="three wide column user_info_op">
          <div class="ui grid">
            <div class="row">
              <div class="ten wide column">
                <!--<i class="icon-photo icon"></i>-->
                  <photo></photo>
                <span>{{userName}}</span>
              </div>
              <div class="six wide column">
                <i class="icon-exit icon" title="退出登录" @click.stop.prevent='logout'></i>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>


  </div>
</template>
<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import model from '_model';
  import photo from './photo.vue';

  import loading from 'components/common/loading';

  export default{
    data(){
      return {
        cmap: [],
        conf: null,
        menus: null,
        styleObj: {
                    height: '50px',
                    'justify-content': 'left'
        },
        path: '',
        detailShow: false,
        userName: this.$cookie.get('txy_name')
      }
    },
    methods: {
      changeTopMenu(mid){
        util.setCtlinfo(this);
        let eventVue = util.store.get(this,'eventVue');
        eventVue.$emit('menuUpdate', mid)
      },
      setLeftMenus() {
        model.Menu.setLeftMenus(this,(data)=> {
          this.$emit('set_has_leftMenus');
          this.getTopMenuConf()
        });
      },

      hlTopMenu() {
          this.menus = this.conf.map(obj => {
              if (!obj)
                  return null;
              let tmp = this._menus.find(menu => {
                  return obj.id == menu.id
              })
              tmp.disable = obj.disable
              return tmp
          }).filter(obj => obj);
          this.menus = this.menus.filter(menu => {
              return !menu.disable
          })
          model.Menu.hlTopMenu(this);
      },
      getTopMenuConf() {
        if(!util.is_admin(this)) {
            let top_menu=util.modelFn('Auth', 'get_auth_menu',this);
            this.conf = top_menu;
            this.hlTopMenu();
        }else{
            let url = tool.getApi(this, 'Editget', 'getTopMenuConf');
            let param = {}
            util.getDataCom(this, url, param, (rs) => {
                this.conf = rs

                this.hlTopMenu();
            });
        }


      },

      logout(){
        this.$emit('logout')
      }
    },
    computed: {
      item_num() {
        return tool.n2e(this.menus.length);
      },
      top_mid() {
        return this.$route.query.top_mid || this.$store.state.global.top_mid;
//        return this.$route.query.top_mid ;
      },
      isLogin(){
        return this.$cookie.get('txy_name') && this.$cookie.get('txy_token')
      },
      tjhref(){
        let url = this.$store.state.global.statHost
        return `${url}/!#/home/total`
      }

    },
    watch: {
      _menus(val){
      }
    },
    components: {photo,loading},
    props: ['_menus', 'user'],
    created(){
      this.setLeftMenus()

      util.eventOn(this, 'topMenuUpdate', this.setLeftMenus);
    },
    mounted(){
//      this.menus = this._menus//后台处理
    }
  }
</script>
<style rel="stylesheet/less" lang="less">

  @dir: "header/";
  .icon-com {
    line-height: 50px;
    font-size: 20px;
    display: block;
    color: rgba(0, 0, 0, 0.6);
    &:hover {
      color: rgba(0, 0, 0, 0.9);
    }
  }

  .header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    /*overflow: hidden;*/
    z-index: 13;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e7e7e7;
    .ui.icon.header {
      width: 200px;
      text-align: left;
      display: block;
      border-radius: 3px;
      &:hover {
      }
      .icon-manyouzhuiconfont {
        margin-left: 30px;
          margin-top:5px;
        font-size: 90px;
        line-height: 20px;
        display: inline-block;
        color: rgba(0, 0, 0, 0.8);
      }
    }
    .ui.secondary.pointing.menu {
      margin-top: 5px;
      border: none;
      .item{
        padding:0;
        a {
          font-size: 16px;
          font-weight: 400;
          box-sizing: border-box;
          color: rgba(0, 0, 0, 0.6);
          padding: .55714286em 0.842857em;
        }
        &.active {
          a {
            font-size: 18px;
            font-weight: 700;
            box-sizing: border-box;
            color: rgba(0, 0, 0, 0.8);
          }
        }
      }
    }
    .user_info_op {
      i {
        .icon-com();
        display: inline-block;
      }
      .icon-exit{
        cursor: pointer;
      }
      span {
        line-height: 50px;
        font-size: 20px;
        display: inline-block;
        margin: 0 10px;
      }
    }
  }
</style>

